<template>
  <div class="canvas canvas-viewer" ref="canvas"></div>
</template>

<script>
// 这里只需要预览引入Viewer就可以，如果需要编辑则引入"bpmn-js/lib/Modeler",并且还需要引入左侧编辑栏panel等
import BpmnViewer from 'bpmn-js/lib/Viewer'
import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
export default {
  props: {
    xml: {
      type: String,
      require: true
    },
    nodeCodes: {
      type: Object,
      default: () => {
        return {
          success: [], // 审批通过接口
          pending: [], // 待审批节点
          error: [] // 审批未通过节点
        }
      }
    },
    height: {
      type: [Number, String],
      default: 540
    },
    move: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      bpmnViewer: null,
      scale: 1
    }
  },
  mounted() {
    this.getImg()
  },
  methods: {
    getImg() {
      // 初始时清除图层
      this.bpmnViewer && this.bpmnViewer.destroy()
      this.$refs.canvas.innerHTML = ''
      this.scale = 1 // 放大缩小比例
      // 初始化canvas
      const additionalModules = []
      this.move && additionalModules.push(MoveCanvasModule)
      this.bpmnViewer = new BpmnViewer({
        container: this.$refs.canvas,
        height: this.height, // 根据实际情况设置高度，宽度的话设置父元素的宽度就可以，会自适应的
        additionalModules: additionalModules
      })
      const self = this
      const bpmnXmlStr = this.xml // 从接口获取的xml文件
      this.bpmnViewer.importXML(bpmnXmlStr, function(err) {
        if (err) {
          console.error(err)
        } else {
          const canvas = self.bpmnViewer.get('canvas')
          canvas.zoom('fit-viewport', 'auto')
          self.setNodeColor(canvas)
        }
      })
    },
    // 设置高亮颜色的class
    setNodeColor(canvas) {
      if (Object.keys(this.nodeCodes).length > 0) {
        Object.keys(this.nodeCodes).forEach(key => {
          for (let i = 0; i < this.nodeCodes[key].length; i++) {
            canvas.addMarker(this.nodeCodes[key][i], 'node' + key)
          }
        })
      }
    }
  }
}
</script>
<style lang="less">
.nodesuccess {
  .djs-visual {
    > * {
      stroke: rgb(67, 160, 71) !important;
      fill: rgb(200, 230, 201) !important;
      stroke-width: 2px !important;
    }
  }
}
.nodeerror {
  .djs-visual {
    > * {
      stroke: #ff7875 !important;
      fill: #f3b7b6 !important;
      stroke-width: 2px !important;
    }
  }
}
.nodepending {
  .djs-visual {
    > * {
      stroke: rgb(30, 136, 229) !important;
      fill: rgb(187, 222, 251) !important;
      stroke-width: 2px !important;
    }
  }
}
.nodepending,.nodeerror,.nodesuccess{
  .djs-visual {
    > text{
        fill: #000 !important;
        stroke: #000 !important;
        stroke-width: 0px !important;
      }
  }
}
.canvas-viewer{
  .bjs-powered-by,.bjs-breadcrumbs{
    display: none;
  }
}
</style>
